<template>
  <div class="main">
    <el-card style="padding-bottom: 20px;">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 45px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>精彩活动</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 走马灯 -->
      <!--      <el-carousel trigger="click" height="150px">-->
      <!--        <el-carousel-item v-for="(img,index) in imgs" :key="index">-->
      <!--          -->
      <!--        </el-carousel-item>-->
      <!--      </el-carousel>-->
      <!-- 筛选区域 -->
      <div class="screening">
        <el-select v-model="queryInfo.collegeId"
                   placeholder="筛选学院"
                   size="small"
                   clearable
                   @change="handleQueryChange()">
          <el-option
              v-for="item in collegeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <!-- 搜索框 -->
        <el-input
            clearable
            placeholder="筛选主题"
            v-model="queryInfo.keyword"
            style="width: 200px; margin-left: 20px"
            size="small"
            @change="handleQueryChange"
        ></el-input>
      </div>
      <!-- 活动列表 -->
      <div class="activities" v-show="showList">
        <el-empty v-show="totalNum === 0" description="暂无博客"></el-empty>
        <div class="container"
             v-for="item in blogList" :key="item.id"
             @click="goActivityDetail(item.teamId)">
          <div class="cover">
            <el-image
                :src="getImgUrl(item.coverPicture)" alt=""
                fit="cover"
                style="width: 200px; height: 140px; box-shadow: #b6b8b6 3px 3px 3px ">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <div class="content">
            <div class="header">
              <div class="title">{{ item.title }}</div>
              <div class="detail">
                <i class="el-icon-user-solid"></i> <span style="margin-right: 30px">作者：{{ item.author }}</span>
                <i class="el-icon-date"></i> <span>发布时间：{{ item.createDate }}</span>
              </div>
            </div>
            <div class="text">
              {{ item.content }}
            </div>
            <el-divider/>
          </div>
        </div>

      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
            hide-on-single-page
            @size-change="handleQueryChange"
            @current-change="handleQueryChange"
            :current-page.sync="queryInfo.pageNum"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="queryInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="totalNum">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import RequestUtil from "@/utils/RequestUtil";

export default {
  data() {
    return {
      collegeList: [],
      blogList: [],
      queryInfo: {
        keyword: '',
        pageSize: 5,
        pageNum: 1,
        collegeId: '',
      },
      totalNum: 0,
      showList: true,
      imgURL: `${this.imgURL}`,
    }
  },
  activated() {
    this.getBlogList()
  },
  created() {
    this.getCollegeList()
  },
  methods: {
    /**
     * 获取学院的列表信息，用于索引
     */
    async getCollegeList() {
      this.collegeList = await RequestUtil.sendCacheableRequest("collegeList", '/auth/getCollegeList')
    },
    getImgUrl(url) {
      var s = `${this.imgURL}` + url;
      console.log("url", s)
      return s
    },
    getBlogList() {
      this.$axios.get(`${this.HOST}/activity/auth/blog/list`, {
        params: this.queryInfo
      }).then(res => {
        // 加图片前缀
        let blogs = res.data.data.list

        /**
         * 将富文本转成普通文本
         * @returns {*}
         * @param html
         */
        function transferRichIntoText(html) {
          let re1 = new RegExp("<.+?>", "g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
          //执行替换成空字符
          return html.replace(re1, '');
        }

        blogs.forEach(item => {
          // item.cover = `${this.imgURL}` + "aps/blog/4782056308ff4e1eba9208be68eead12.jpg"
          item.content = transferRichIntoText(item.blog)
        })
        this.blogList = blogs
        //
        this.totalNum = res.data.data.total
      })
    },
    goActivityDetail(id) {
      this.showList = false;
      // console.log("inner", id)
      this.$emit("doActivityDetail", id)
    },
    activateList() {
      this.showList = true;
    },
    handleSizeChange(size) {
      // console.log(size)
      this.queryInfo.pageSize = size
      this.getBlogList()
    },
    handleQueryChange() {
      // console.log(this.queryInfo)
      this.getBlogList()
    }
  }
}
</script>

<style lang="less" scoped>
.screening {
  display: flex;
  //justify-content: space-between;
}

.main {
  transition: 0.3s ease;
}

.block {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.activities {

  .container {
    margin-left: 10px;
    display: flex;
    margin-top: 20px;
    cursor: pointer;

    .cover {
      .el-image {
        border-radius: 5px !important;
      }
    }

    .content {
      margin-left: 15px;
      margin-right: 10px;
      //background-color: red;;

      .header {
        .title {
          font-size: 100%;
          font-weight: bold;
          padding-top: 5px;
          margin-bottom: 10px;
        }

        .detail {
          font-size: 80%;
          font-weight: lighter;
        }

        margin-bottom: 5px;
      }

      .text {
        text-indent: 24px;
        font-size: 90%;
        line-height: 20px;

        // 多行省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
